<template>
  <div
    class="container"
    v-loading="fullLoading"
    element-loading-background="rgba(0, 0, 0, 0.5)"
  >
    <!-- <h2>宽带信号采集设备</h2> -->
    <div class="topContainer">
      <div class="setting">
        <el-form
          :model="settingForm"
          ref="settingForm"
          :rules="rules"
          label-width="90px"
          :inline="false"
          size="mini"
        >
          <el-card shadow="always" :body-style="{ padding: '10px' }">
            <!-- card body -->
            <!-- <el-tabs v-model="activeName" type="card" tab-position="top"> -->
            <!-- <el-tab-pane label="通道一配置" name="first"> -->
            <el-row :gutter="20" style="color: #0d0d0d; margin-bottom: 5px">
              <el-col :span="8" :offset="0">&emsp;</el-col>
              <el-col :span="8" :offset="0">通道一</el-col>
              <el-col :span="8" :offset="0">通道二</el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="15" :offset="0">
                <el-form-item class="mg14" prop="frequency1" label="频点(MHz)">
                  <el-input-number
                    style="width: 100%"
                    v-model="settingForm.frequency1"
                    controls-position="right"
                    :min="950"
                    :max="2150"
                  >
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="9" :offset="0">
                <el-form-item class="mg14" prop="frequency2" label-width="0">
                  <el-input-number
                    style="width: 100%"
                    v-model="settingForm.frequency2"
                    controls-position="right"
                    :min="950"
                    :max="2150"
                  >
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="15" :offset="0">
                <el-form-item class="mg14" prop="gain1" label="增益(dB)">
                  <el-input-number
                    style="width: 100%"
                    v-model="settingForm.gain1"
                    controls-position="right"
                    :min="settingForm.gainMode1 == 1 ? -15 : 0"
                    :max="settingForm.gainMode1 == 1 ? 45 : 60"
                    :step="0.5"
                  >
                  </el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="9" :offset="0">
                <el-form-item class="mg14" prop="gain2" label-width="0">
                  <el-input-number
                    style="width: 100%"
                    v-model="settingForm.gain2"
                    controls-position="right"
                    :min="settingForm.gainMode2 == 1 ? -15 : 0"
                    :max="settingForm.gainMode2 == 1 ? 45 : 60"
                    :step="0.5"
                  >
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="15" :offset="0">
                <el-form-item prop="ddc1BW" label="带宽">
                  <el-select v-model="settingForm.ddc1BW" style="width: 100%">
                    <el-option label="500MHz原始采集" :value="1"> </el-option>
                    <el-option label="200MHz" :value="2"> </el-option>
                    <el-option label="100MHz" :value="3"> </el-option>
                    <el-option label="50MHz" :value="4"> </el-option>
                    <el-option label="10MHz" :value="5"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="9" :offset="0">
                <el-form-item prop="ddc2BW" label-width="0">
                  <el-select v-model="settingForm.ddc2BW" style="width: 100%">
                    <el-option label="500MHz原始采集" :value="1"> </el-option>
                    <el-option label="200MHz" :value="2"> </el-option>
                    <el-option label="100MHz" :value="3"> </el-option>
                    <el-option label="50MHz" :value="4"> </el-option>
                    <el-option label="10MHz" :value="5"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="15" :offset="0">
                <el-form-item prop="ddc1Type" label="数据类型">
                  <el-select v-model="settingForm.ddc1Type" style="width: 100%">
                    <el-option label="实数据" :value="1"> </el-option>
                    <el-option
                      :disabled="settingForm.ddc1BW == 1"
                      label="IQ数据"
                      :value="2"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="9" :offset="0">
                <el-form-item prop="ddc2Type" label-width="0">
                  <el-select v-model="settingForm.ddc2Type" style="width: 100%">
                    <el-option label="实数据" :value="1"> </el-option>
                    <el-option
                      :disabled="settingForm.ddc2BW == 1"
                      label="IQ数据"
                      :value="2"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="15" :offset="0">
                <el-form-item label-width="80px" label="工作模式">
                  <el-select
                    v-model="settingForm.gainMode1"
                    style="width: 100%"
                  >
                    <el-option label="常规模式" :value="1"> </el-option>
                    <el-option label="低噪声模式" :value="2"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="9" :offset="0">
                <el-form-item label-width="0">
                  <el-select
                    v-model="settingForm.gainMode2"
                    style="width: 100%"
                  >
                    <el-option label="常规模式" :value="1"> </el-option>
                    <el-option label="低噪声模式" :value="2"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="15" :offset="0"></el-col>
              <el-col :span="9" :offset="0"></el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="15" :offset="0"></el-col>
              <el-col :span="9" :offset="0"></el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="15" :offset="0"></el-col>
              <el-col :span="9" :offset="0"></el-col>
            </el-row>

            <el-form-item
              label-width="150"
              label="通道一瀑布图幅度"
              style="margin-bottom: 5px"
            >
              <el-input-number
                class="num"
                style="width: 60px"
                v-model="pubuMap[1][0]"
                :min="-350"
                :max="250"
                :controls="false"
              >
              </el-input-number>
              <span style="font-family: microsoft yahei; padding: 0 5px"
                >~</span
              >
              <el-input-number
                class="num"
                style="width: 60px"
                v-model="pubuMap[1][1]"
                :min="-350"
                :max="250"
                :controls="false"
              >
              </el-input-number>
            </el-form-item>

            <el-form-item
              label-width="150"
              label="通道二瀑布图幅度"
              style="margin-bottom: 5px"
            >
              <el-input-number
                class="num"
                style="width: 60px"
                v-model="pubuMap[2][0]"
                :min="-350"
                :max="250"
                :controls="false"
              >
              </el-input-number>
              <span style="font-family: microsoft yahei; padding: 0 5px"
                >~</span
              >
              <el-input-number
                class="num"
                style="width: 60px"
                v-model="pubuMap[2][1]"
                :min="-350"
                :max="250"
                :controls="false"
              >
              </el-input-number>
            </el-form-item>
            <!-- </el-tabs> -->
            <div
              style="
                width: 100%;
                height: 2px;
                border-top: 1px dashed #ccc;
                margin: 10px 0;
              "
            ></div>
            <el-form-item label="文件路径">
              <el-input v-model="settingForm.filePath"></el-input>

              <!-- <el-button type="primary" size="mini" @click="selectDirectory">选择</el-button> -->
            </el-form-item>
            <el-form-item label="文件前缀">
              <el-input v-model="settingForm.filePrefix"></el-input>
            </el-form-item>
            <el-form-item
              label="文件分割大小"
              label-width="120"
              style="margin-bottom: 10px"
            >
              <el-select v-model="settingForm.splitSize" style="width: 56%">
                <el-option label="512" :value="512"> </el-option>
                <el-option label="1024" :value="1024"> </el-option>
                <el-option label="1535" :value="1535"> </el-option>
                <el-option label="2048" :value="2048"> </el-option>
                <el-option label="2560" :value="2560"> </el-option>
                <el-option label="3072" :value="3072"> </el-option>
                <el-option label="3584" :value="3584"> </el-option>
                <el-option label="4096" :value="4096"> </el-option>
              </el-select>
              MB
            </el-form-item>
            <el-form-item label="" label-width="0" style="margin-bottom: 0px">
              <div style="text-align: right; margin: 5px 20px 0 0">
                <el-button
                  type="primary"
                  size="mini"
                  style="width: 100px"
                  @click="startCollect"
                  >应用</el-button
                >
              </div>
            </el-form-item>
          </el-card>

          <el-card shadow="always" :body-style="{ padding: '10px' }">
            <!-- card body -->
            <el-form
              :model="saveForm"
              ref="saveForm"
              :rules="saveRules"
              label-width="90px"
              :inline="false"
              size="mini"
            >
              <el-form-item label="采集模式" style="margin-bottom: 3px">
                <template slot="label">
                  <span style="font-size: 16px; font-weight: 700"
                    >采集模式</span
                  >
                </template>
                <span v-show="isSaving">
                  <i class="el-icon-loading"></i>
                  存储中···
                </span>
              </el-form-item>

              <el-form-item
                label=""
                label-width="50px"
                style="margin-bottom: 3px"
              >
                <template slot="label">
                  <el-radio
                    :disabled="isSave"
                    v-model="saveForm.lengthOrTime"
                    :label="3"
                    >手动</el-radio
                  >
                </template>
              </el-form-item>

              <el-form-item label="定长" label-width="50px">
                <template slot="label">
                  <el-radio
                    :disabled="isSave"
                    v-model="saveForm.lengthOrTime"
                    :label="1"
                    >定长</el-radio
                  >
                </template>
                <el-input-number
                  :disabled="isSave || saveForm.lengthOrTime != 1"
                  style="width: 80%"
                  v-model="saveForm.fixedLength"
                  controls-position="right"
                >
                </el-input-number>
                MB
              </el-form-item>

              <el-form-item label="定时" label-width="50px">
                <template slot="label">
                  <el-radio
                    :disabled="isSave"
                    v-model="saveForm.lengthOrTime"
                    :label="0"
                    >定时</el-radio
                  >
                </template>
                <el-input-number
                  :disabled="isSave || saveForm.lengthOrTime != 0"
                  style="width: 80%"
                  v-model="saveForm.fixedTime"
                  controls-position="right"
                >
                </el-input-number>
                秒
              </el-form-item>

              <el-form-item
                label="时间列表"
                label-width="200px"
                style="margin-bottom: 5px"
              >
                <template slot="label">
                  <div style="display: flex; align-items: center">
                    <el-radio
                      :disabled="isSave"
                      v-model="saveForm.lengthOrTime"
                      :label="2"
                      >时间列表</el-radio
                    >
                    <el-button
                      type="primary"
                      size="mini"
                      @click="showSettingDialog = true"
                      :disabled="isSave || saveForm.lengthOrTime != 2"
                      >参数配置</el-button
                    >
                  </div>
                </template>
              </el-form-item>

              <el-form-item class="mg14" label="存储通道" prop="channelId">
                <el-checkbox-group
                  :disabled="isSave || saveForm.lengthOrTime == 4"
                  v-model="saveForm.channelId"
                >
                  <el-checkbox :label="1">通道1</el-checkbox>
                  <el-checkbox :label="2">通道2</el-checkbox>
                </el-checkbox-group>
              </el-form-item>

              <el-form-item label="信号触发" label-width="90px">
                <template slot="label">
                  <el-radio
                    :disabled="isSave"
                    v-model="saveForm.lengthOrTime"
                    :label="4"
                    >信号触发</el-radio
                  >
                </template>
                <el-input-number
                  :disabled="isSave || saveForm.lengthOrTime != 4"
                  style="width: 75px"
                  :min="-120"
                  :max="20"
                  v-model="thresholdForm.thresholdValue1"
                  controls-position="right"
                >
                </el-input-number>
                &nbsp;
                <el-input-number
                  :disabled="isSave || saveForm.lengthOrTime != 4"
                  style="width: 75px"
                  :min="-120"
                  :max="20"
                  v-model="thresholdForm.thresholdValue2"
                  controls-position="right"
                >
                </el-input-number>
              </el-form-item>
              <el-form-item label="" label-width="0" style="margin-bottom: 3px">
                <div
                  style="text-align: center; margin-top: 0px"
                  v-show="saveForm.lengthOrTime != 4"
                >
                  <el-button
                    :disabled="isSave"
                    type="primary"
                    size="mini"
                    style="width: 100px; margin-right: 15px"
                    @click="startSaving"
                    >开始存储</el-button
                  >
                  <el-button
                    :disabled="!isSave"
                    type="primary"
                    size="mini"
                    style="width: 100px; margin-right: 15px"
                    @click="stopSaving"
                    >停止存储</el-button
                  >
                </div>

                <div
                  style="text-align: center; margin-top: 0px"
                  v-show="saveForm.lengthOrTime == 4"
                >
                  <el-button
                    :disabled="thresholdForm.isStart"
                    type="primary"
                    size="mini"
                    style="width: 100px; margin-right: 15px"
                    @click="setThresholdValue(true)"
                    >开始</el-button
                  >
                  <el-button
                    :disabled="!thresholdForm.isStart"
                    type="primary"
                    size="mini"
                    style="width: 100px; margin-right: 15px"
                    @click="setThresholdValue(false)"
                    >关闭</el-button
                  >
                </div>
              </el-form-item>
            </el-form>
          </el-card>
        </el-form>
      </div>
      <div class="rightContainer">
        <div class="btns">
          <!-- <div
            v-for="item in 2"
            :key="item"
            class="channel"
            @click="chooseChannel(item)"
            :class="{ active: currentChannel == item }"
          >
            通道{{ item }}
          </div> -->

          <div class="chartType">
            <el-radio
              v-removeAriaHidden
              v-model="chartType"
              :label="0"
              @change="changeChartType"
              >时域图</el-radio
            >
            <el-radio
              v-removeAriaHidden
              v-model="chartType"
              :label="1"
              @change="changeChartType"
              >频域图</el-radio
            >
          </div>

          <el-button
            type="primary"
            size="mini"
            @click="
              historyListDialog = true;
              getHistoryList();
            "
            style="position: absolute; right: 20px"
            >历史文件</el-button
          >
        </div>
        <div class="charts">
          <WebGLChartDetial ref="webGLChartDetial1" class="detialCharts" />
          <WebGLChartDetial ref="webGLChartDetial2" class="detialCharts" />
        </div>
      </div>
    </div>

    <div class="info">
      <el-row :gutter="20">
        <el-col :span="4" :offset="0"
          >FPGA温度：{{ deviceInfo.fPGATemperature }} ℃</el-col
        >
        <el-col :span="4" :offset="0"
          >FPGA电压：{{ deviceInfo.fPGAVoltage }} V</el-col
        >
        <el-col :span="4" :offset="0">
          射频温度：{{ deviceInfo.rFTemperature }} ℃</el-col
        >

        <!-- <el-col :span="4" :offset="0">
          JESD状态：{{ deviceInfo.jESDState }}</el-col
        > -->
        <el-col :span="6" :offset="0"
          >通道1:2采集速度：{{ deviceInfo.collectSpeed1 }}:{{
            deviceInfo.collectSpeed2
          }}
          MB/s</el-col
        >

        <el-col :span="6" :offset="0">
          通道1:2采集大小：{{ deviceInfo.collectedSize1 }}:{{
            deviceInfo.collectedSize2
          }}
          G</el-col
        >
      </el-row>

      <el-row :gutter="20">
        <el-col :span="4" :offset="0">
          {{ deviceInfo.sync == 1 ? "外参考" : "内时钟" }}
        </el-col>

        <el-col :span="4" :offset="0"
          >硬盘剩余容量：{{ deviceInfo.diskTotalFreeSpace }} T</el-col
        >
        <el-col :span="4" :offset="0">
          硬盘总容量：{{ deviceInfo.diskTotalSize }} T</el-col
        >
        <el-col :span="4" :offset="0"
          >硬盘已用容量：{{ deviceInfo.diskUsedSpace }} T</el-col
        >

        <el-col :span="2" :offset="0">
          存储卡状态：
          <div
            class="circle"
            :class="{ normal: deviceInfo.diskStatus == 1 }"
          ></div>
        </el-col>
        <el-col :span="2" :offset="0">
          数字卡状态：
          <div
            class="circle"
            :class="{ normal: deviceInfo.fPGAStatus == 1 }"
          ></div>
        </el-col>
        <el-col :span="2" :offset="0">
          射频卡状态：
          <div
            class="circle"
            :class="{ normal: deviceInfo.rFStatus == 1 }"
          ></div>
        </el-col>
        <el-col :span="2" :offset="0">
          PC状态：
          <div
            class="circle"
            :class="{ normal: deviceInfo.pCStatus == 1 }"
          ></div>
        </el-col>
      </el-row>
    </div>

    <el-dialog
      :visible.sync="historyListDialog"
      top="5%"
      width="80%"
      v-dialogDrag
      v-loading="loading"
      :close-on-click-modal="false"
      :modal="false"
      :center="true"
      element-loading-background="rgba(0, 0, 0, 0.5)"
    >
      <span slot="title" class="dialogTitle">文件列表</span>
      <span></span>

      <!-- 检索区域 -->
      <div class="searchContainer">
        <div class="label">文件名称</div>
        <el-input
          v-model="searchForm.fileName"
          size="mini"
          style="width: 200px; margin-right: 20px"
        ></el-input>

        <div class="label">文件日期</div>
        <el-date-picker
          v-model="searchForm.time"
          placeholder="选择日期时间"
          size="mini"
          type="date"
          value-format="yyyy-MM-dd"
          style="margin-right: 20px"
        >
        </el-date-picker>

        <!-- <div class="label">文件日期</div>
        <el-input-number
          style="margin-right: 20px"
          v-model="searchForm.center"
          size="mini"
          :controls="false"
        >
        </el-input-number> -->

        <el-button
          style="border-radius: 5px"
          icon="el-icon-search"
          type="primary"
          size="mini"
          @click="getHistoryList"
          >查询</el-button
        >
        <!-- <el-button
          style="border-radius: 5px"
          icon="el-icon-download"
          type="primary"
          size="mini"
          @click="exportFile"
          >导出</el-button
        > -->
      </div>

      <el-table
        ref="historyList"
        :data="historyList"
        border
        height="500"
        size="small"
      >
        <!-- <el-table-column type="selection" label="" width="55" align="center">
        </el-table-column> -->
        <el-table-column type="index" label="序号" width="55" align="center">
        </el-table-column>
        <el-table-column
          v-for="col in columns"
          align="center"
          :prop="col.value"
          :key="col.value"
          :label="col.label"
          :width="col.width"
          :formatter="col.formatter"
        >
        </el-table-column>
      </el-table>

      <!-- <div style="text-align: right; padding-left: 10px; margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="searchForm.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div> -->
    </el-dialog>

    <!-- 定时列表配置弹窗 -->
    <el-dialog
      :visible.sync="showSettingDialog"
      top="10%"
      width="36%"
      v-dialogDrag
      :close-on-click-modal="false"
      :modal="false"
      :center="true"
      class="timeList"
    >
      <span slot="title" class="dialogTitle">时间列表</span>

      <el-form
        :model="timeForm"
        ref="timeForm"
        label-width="80px"
        :inline="false"
        size="mini"
      >
        <el-form-item label="添加配置">
          <template slot="label">
            <el-button
              type="primary"
              size="mini"
              @click="
                timeForm.timeList.push({
                  startTime: null,
                  endTime: null,
                  id: Date.now(),
                })
              "
              >添加配置</el-button
            >
          </template>
        </el-form-item>

        <el-row v-for="(item, index) in timeForm.timeList" :key="item.id">
          <el-col :span="11" :offset="0">
            <!-- 频点 -->
            <el-form-item
              :prop="`timeList[${index}].startTime`"
              label="开始时间"
              :rules="[
                { required: true, message: '请选择开始时间', trigger: 'blur' },
                {
                  validator: (rule, value, callback) => {
                    validateStartTime(rule, value, callback, index);
                  },
                  trigger: 'blur',
                },
              ]"
            >
              <el-date-picker
                v-model="item.startTime"
                type="datetime"
                placeholder="选择日期时间"
                value-format="timestamp"
                @blur="validateForm"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="11" :offset="0">
            <!-- 频点 -->
            <el-form-item
              :prop="`timeList[${index}].endTime`"
              label="结束时间"
              :rules="[
                { required: true, message: '请选择结束时间', trigger: 'blur' },
                {
                  validator: (rule, value, callback) => {
                    validateEndTime(rule, value, callback, index);
                  },
                  trigger: 'blur',
                },
              ]"
            >
              <el-date-picker
                v-model="item.endTime"
                type="datetime"
                placeholder="选择日期时间"
                value-format="timestamp"
                @blur="validateForm"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col
            :span="2"
            :offset="0"
            key="3"
            v-if="timeForm.timeList.length > 1"
          >
            <i
              @click="removeItem(item)"
              class="el-icon-circle-close"
              style="
                position: absolute;
                right: 4%;
                top: 20%;
                font-size: 20px;
                color: #0d0d0d;
                cursor: pointer;
              "
            ></i>
          </el-col>
        </el-row>
      </el-form>

      <span></span>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="showSettingDialog = false"
          >取消</el-button
        >
        <el-button size="small" type="primary" @click="setTimedList"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import WebGLChartDetial from '@/components/WebGLChartDetial/index.vue'
import {
  getParamsAPI,
  getDeviceInfoAPI,
  startCollectAPI,
  getHistoryListAPI,
  exportFileAPI,
  stopCollectAPI,
  startSaveAPI,
  stopSaveAPI,
  getSaveConfigAPI,
  setThresholdValueAPI,
  setPubuMapAPI,
  getFileListAPI
} from '@/api/broadbandSignal'
export default {
  name: 'BroadbandSignal',
  data () {
    return {
      currentChannel: 1,
      activeName: 'first',

      settingForm: {
        frequency1: undefined,
        frequency2: undefined,
        gain1: undefined,
        gain2: undefined,
        ddc1BW: 1,
        ddc2BW: 1,
        ddc1Type: 1,
        ddc2Type: 1,
        gainMode1: 1,
        gainMode2: 1,
        // bandwidth: undefined,
        trigger: 0,
        // clockMode: 0,
        // channelEnable: [],
        filePath: '',
        filePrefix: '',
        // qianzhui: '',
        splitSize: 512
        // keyboardControlMode: 1,
        // isSave: 0,
        // fixedLength: 512,
        // fixedTime: 10
        // hour: 0,
        // min: 0,
        // second: 0,
        // lengthOrTime: 1 // 选择定长还是定时
      },
      // chooseTime: false,
      rules: {
        frequency1: [
          { required: true, message: '请填写频点', trigger: 'change' }
        ],
        frequency2: [
          { required: true, message: '请填写频点', trigger: 'change' }
        ],
        /* bandwidth: [
          { required: true, message: '请填写中频带宽', trigger: 'change' }
        ], */
        gain1: [{ required: true, message: '请填写增益值', trigger: 'change' }],
        gain2: [{ required: true, message: '请填写增益值', trigger: 'change' }]

        /* chooseTime: [
          { validator: this.validateChooseTime, trigger: ['blur', 'change'] }
        ] */
      },

      saveForm: {
        fixedLength: 512,
        fixedTime: 10,
        channelId: [],
        lengthOrTime: 1 // 选择定长还是定时
      },
      saveRules: {
        channelId: [
          { required: true, message: '请选择通道', trigger: 'change' }
        ]
      },

      timeForm: {
        timeList: [
          {
            startTime: null,
            endTime: null,
            id: Date.now()
          }
        ]
      },

      timeRules: {
        // 自定义校验规则
        startTime: [
          { required: true, message: '请选择开始时间', trigger: 'blur' },
          { validator: this.validateStartTime, trigger: 'blur' }
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: 'blur' },
          { validator: this.validateEndTime, trigger: 'blur' }
        ]
      },

      thresholdForm: {
        thresholdValue1: 0,
        thresholdValue2: 0,
        isStart: false
      },

      textarea: '',
      chartType: 0,

      historyListDialog: false,

      historyList: [],

      columns: [
        {
          label: '文件名称',
          value: 'fileName'
        },
        {
          label: '时间',
          value: 'time',
          formatter: this.formatTime
        },
        {
          label: '路径',
          value: 'filePath'
        },
        {
          label: '通道名称',
          value: 'channelName'
        },
        {
          label: '频点',
          value: 'frequencyPoint'
        },
        {
          label: '带宽',
          value: 'bandwidth'
        },
        {
          label: '数据格式',
          value: 'dataType' // 1 实数据  2 IQ数据
          // formatter: this.formatDataType
        }
      ],

      searchForm: {
        // page: 1,
        // size: 10,
        fileName: '', // 文件名
        date: '' // 日期
      },

      total: 0,

      varyRows: 2,
      collectSwitch: true, // 是否开始采集了 => 以后一直是采集状态了
      isSave: false, // 是否开始存储 => 按钮动作
      isSaving: false, // 是否开始存储了 => 实际存储状态

      channelOptions: ['通道1', '通道2'],

      loading: false,
      fullLoading: false,

      webSocket: null,

      // 设备状态信息
      deviceInfo: {},

      showSettingDialog: false,
      pubuMap: {
        1: [-120, 20],
        2: [-120, 20]
      }
    }
  },
  watch: {
    /* 切换时域图、频谱图
        1）格式化、取消格式化频谱图的X轴区间
        2）设置频谱图的Y轴默认区间
        // 设置频谱图最大Y轴区间
        this.$refs.specView.series.setMaxYInterval([-350, 250])
        // 设置频谱图当前Y轴区间
        this.$refs.specView.series.changeYInterval([-120, 20])
        // 设置瀑布图Y轴区间 => 影响瀑布图颜色
        this.changeYRange(20, -120)
    */
    chartType: {
      handler (newVal) {
        this.$nextTick(() => {
          if (newVal == 0) {
            // 时域图
            // 设置频谱图当前Y轴区间
            this.$refs.webGLChartDetial1.$refs.specView.series.changeYInterval([
              -60, 60
            ])

            this.$refs.webGLChartDetial1.$refs.specView.series.setXAxisMarkFormatter(
              (value) => {
                return Number(value).toFixed(0)
              }
            )

            this.$refs.webGLChartDetial2.$refs.specView.series.changeYInterval([
              -60, 60
            ])

            this.$refs.webGLChartDetial2.$refs.specView.series.setXAxisMarkFormatter(
              (value) => {
                return Number(value).toFixed(0)
              }
            )
          } else {
            // 频域图
            this.$refs.webGLChartDetial1.$refs.specView.series.changeYInterval([
              -120, 20
            ])

            this.$refs.webGLChartDetial1.$refs.specView.series.setXAxisMarkFormatter(
              (value) => {
                return Number(value / 1000).toFixed(3)
              }
            )

            this.$refs.webGLChartDetial2.$refs.specView.series.changeYInterval([
              -120, 20
            ])

            this.$refs.webGLChartDetial2.$refs.specView.series.setXAxisMarkFormatter(
              (value) => {
                return Number(value / 1000).toFixed(3)
              }
            )
          }
          this.$refs.webGLChartDetial1.isFirst = true
          this.$refs.webGLChartDetial2.isFirst = true

          this.$refs.webGLChartDetial1.$refs.specView.clearChart()
          this.$refs.webGLChartDetial2.$refs.specView.clearChart()
        })
      },
      immediate: true
    },
    'saveForm.lengthOrTime': {
      handler (newVal) {
        if (newVal == 4) {
          this.$nextTick(() => {
            this.$refs.saveForm.clearValidate()
          })
        }
      },
      immediate: true
    },
    'settingForm.ddc1BW': {
      handler (newVal) {
        if (newVal == 1 && this.settingForm.ddc1Type == 2) {
          this.settingForm.ddc1Type = 1
        }
      },
      immediate: true
    },
    'settingForm.ddc2BW': {
      handler (newVal) {
        if (newVal == 1 && this.settingForm.ddc2Type == 2) {
          this.settingForm.ddc2Type = 1
        }
      },
      immediate: true
    },
    'settingForm.gainMode1': {
      handler (newVal) {
        if (newVal == 1) {
          // -15 ~ 45
          if (this.settingForm.gain1 > 45) {
            this.settingForm.gain1 = 45
          }
        } else if (newVal == 2) {
          if (this.settingForm.gain1 < 0) {
            this.settingForm.gain1 = 0
          }
        }
      }
    },
    'settingForm.gainMode2': {
      handler (newVal) {
        if (newVal == 1) {
          // -15 ~ 45
          if (this.settingForm.gain2 > 45) {
            this.settingForm.gain2 = 45
          }
        } else if (newVal == 2) {
          if (this.settingForm.gain2 < 0) {
            this.settingForm.gain2 = 0
          }
        }
      }
    }
  },
  components: {
    WebGLChartDetial
  },
  mounted () {
    // this.updateRows()
    // window.addEventListener('resize', this.updateRows)

    this.getParams()
    this.getSaveConfig()
    // this.getDeviceInfo()

    this.initWebSocket()
  },
  beforeDestroy () {
    // window.removeEventListener('resize', this.updateRows)

    // 组件销毁前停止ws通信
    this.webSocket.close()
  },
  methods: {
    formatTime (row, column, timestamp) {
      if (!timestamp) return '-'
      const date = new Date(timestamp)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
    formatDataType (row, column, type) {
      if (type == 1) {
        return '实数据'
      } else if (type == 2) {
        return 'IQ数据'
      } else {
        return '-'
      }
    },
    updateRows () {
      const el = document.querySelector('.textarea .el-card__body')
      const parentHeight = el.offsetHeight - 40 // 计算elbody的有效高度 => 减去上下内边距
      // console.dir(el)
      const lineHeight = 20 // 每行的行高为20px
      this.varyRows = Math.floor(parentHeight / lineHeight)
    },
    async getParams () {
      try {
        this.fullLoading = true
        const { data } = await getParamsAPI()
        // console.log('表单参数:', data)
        // #region
        // this.settingForm.channelEnable = []

        /* data.channelEnable.forEach((item, index) => {
          if (item == 1) {
            this.settingForm.channelEnable.push(index)
          }
        }) */

        /* if (data.targetTime) {
          this.settingForm.hour = data.targetTime.split(':')[0]
          this.settingForm.min = data.targetTime.split(':')[1]
          this.settingForm.second = data.targetTime.split(':')[2]
        } */

        if (data.gainMode1 == 1) {
          data.gain1 -= 15
        }

        if (data.gainMode2 == 1) {
          data.gain2 -= 15
        }

        // #endregion
        Object.keys(data).forEach((key) => {
          if (
            key != 'channelEnable' &&
            Object.keys(this.settingForm).includes(key)
          ) {
            this.settingForm[key] = data[key]
          }
        })

        if (data.pubuMap && data.pubuMap[1] && data.pubuMap[2]) {
          this.pubuMap = data.pubuMap
          this.changePubuYInterval()
        }

        // this.collectSwitch = data.collectSwitch
        this.fullLoading = false
      } catch (error) {
        console.log(error)
        this.fullLoading = false
      }
    },
    async getSaveConfig () {
      try {
        const { data } = await getSaveConfigAPI()
        // console.log('存储参数:', data)
        Object.keys(data).forEach((key) => {
          if (Object.keys(this.saveForm).includes(key)) {
            this.saveForm[key] = data[key]
          }
        })
        if (data.isSave != null) {
          this.isSave = data.isSave
        }
        if (data.isSaving != null) {
          this.isSaving = data.isSaving
        }
        if (data.timeList) {
          this.timeForm.timeList = data.timeList
        }
        if (data.thresholdValue1 != null && data.thresholdValue2 != null) {
          this.thresholdForm.thresholdValue1 = data.thresholdValue1
          this.thresholdForm.thresholdValue2 = data.thresholdValue2
        }
        if (data.isStart != null) {
          this.thresholdForm.isStart = data.isStart
        }
      } catch (error) {
        console.log(error)
      }
    },
    async getDeviceInfo () {
      try {
        const { data } = await getDeviceInfoAPI()
        // console.log('温度电压信息:', data)
      } catch (error) {
        console.log(error)
      }
    },
    // 切换当前查看的通道
    chooseChannel (num) {
      // this.currentChannel = num
      // this.$refs.webGLChartDetial.fitFlag = true
      this.changePubuYInterval()
    },
    changeChartType (chartType) {
      // this.$refs.webGLChartDetial.fitFlag = true
    },
    removeItem (item) {
      // 找到点击删除行的索引值
      const index = this.timeForm.timeList.indexOf(item)
      if (index !== -1) {
        // 删除行及标识数组
        this.timeForm.timeList.splice(index, 1)
      }
    },
    async getHistoryList () {
      try {
        const { data } = await getFileListAPI(this.searchForm)
        // console.log('历史数据', data)
        this.historyList = data
        // this.historyList = data.records
        // this.total = data.total
      } catch (error) {
        console.log(error)
        this.$message.error('查询失败！')
      }
    },
    // 每页条数变化了
    handleSizeChange (newSize) {
      // console.log(newSize);
      this.searchForm.size = newSize
      this.searchForm.page = 1
      this.getHistoryList()
    },
    // 当前页码变化了
    handleCurrentChange (newPage) {
      // console.log(newPage);
      this.searchForm.page = newPage
      this.getHistoryList()
    },
    validateStartTime (rule, value, callback, index) {
      const item = this.timeForm.timeList[index]

      /* if (!value || !item.endTime) {
        callback()
        return
      } */

      if (value < Date.now()) {
        callback(new Error('开始时间必须大于当前时间'))
      } else if (value >= item.endTime) {
        callback(new Error('开始时间必须小于结束时间'))
      } else {
        this.validateIntervals()
        callback()
      }
    },
    validateEndTime (rule, value, callback, index) {
      const item = this.timeForm.timeList[index]

      /* if (!value || !item.startTime) {
        callback()
        return
      } */

      if (value < Date.now()) {
        callback(new Error('结束时间必须大于当前时间'))
      } else if (value <= item.startTime) {
        callback(new Error('结束时间必须大于开始时间'))
      } else if (!this.validateIntervals()) {
        callback(new Error('时间段不能交叉'))
      } else if (this.validateIntervals()) {
        callback()
      }
    },
    validateIntervals () {
      const intervals = this.timeForm.timeList
      for (let i = 0; i < intervals.length; i++) {
        for (let j = i + 1; j < intervals.length; j++) {
          if (
            intervals[i].startTime &&
            intervals[i].endTime &&
            intervals[j].startTime &&
            intervals[j].endTime
          ) {
            if (
              intervals[i].startTime < intervals[j].endTime &&
              intervals[i].endTime > intervals[j].startTime
            ) {
              // this.$message.error('时间段不能交叉')
              return false
            }
          }
        }
      }
      return true
    },
    // 时间列表
    setTimedList () {
      this.$refs.timeForm.validate(async (valid) => {
        if (valid) {
          this.showSettingDialog = false
        } else {
          return false
        }
      })
    },
    // 安全限制，不行
    selectDirectory () {
      const input = document.createElement('input')
      input.type = 'file'
      input.webkitdirectory = true
      input.style.display = 'none'

      input.onchange = (event) => {
        const files = event.target.files
        if (files.length > 0) {
          // 获取第一个文件的路径
          const firstFile = files[0]
          const pathParts = firstFile.webkitRelativePath.split('/')
          const directoryPath = pathParts.slice(0, -1).join('/')
          console.log('directoryPath', directoryPath)
          // this.selectedDirectory = directoryPath
        }
      }

      input.click()
    },
    // 开始采集 => 参数下发
    async startCollect () {
      this.$refs.settingForm.validate(async (valid) => {
        if (valid) {
          try {
            this.fullLoading = true
            const temObj = JSON.parse(JSON.stringify(this.settingForm))
            // temObj.currentChannel = this.currentChannel
            // 调接口
            await setPubuMapAPI({
              pubuMap: this.pubuMap
            })
            this.changePubuYInterval()
            if (this.settingForm.gainMode1 == 1) {
              temObj.gain1 += 15
            }

            if (this.settingForm.gainMode2 == 1) {
              temObj.gain2 += 15
            }

            await startCollectAPI(temObj)
            // this.collectSwitch = true
            this.$refs.webGLChartDetial1.fitFlag = true
            this.$refs.webGLChartDetial2.fitFlag = true
            this.$message.success('参数配置成功！')
          } catch (error) {
            console.log(error)
            this.$message.error('操作失败！')
          } finally {
            this.fullLoading = false
          }
        } else {
          if (typeof key != 'string') {
            if (
              this.settingForm.frequency1 == undefined ||
              this.settingForm.gain1 == undefined
            ) {
              this.$message.warning('通道一配置未填写完整！')
            } else if (
              this.settingForm.frequency2 == undefined ||
              this.settingForm.gain2 == undefined
            ) {
              this.$message.warning('通道二配置未填写完整！')
            }
          }
          return false
        }
      })
    },
    validateForm () {
      this.$refs.timeForm.validate((valid) => {
        if (valid) {
          console.log('表单校验通过')
        } else {
          console.log('表单校验不通过')
        }
      })
    },
    // 停止采集
    async stopCollect () {
      try {
        await stopCollectAPI()
        this.collectSwitch = false
        this.$message.success('已停止采集！')
      } catch (error) {
        console.log(error)
        this.$message.error('操作失败！')
      }
    },
    // 开始存储
    startSaving () {
      this.$refs.saveForm.validate(async (valid) => {
        if (valid) {
          try {
            const temObj = JSON.parse(JSON.stringify(this.saveForm))

            // 添加时间列表字段
            if (temObj.lengthOrTime == 2) {
              if (
                this.timeForm.timeList.length == 0 ||
                this.timeForm.timeList[0].startTime == null
              ) {
                return this.$message.warning('请配置时间列表！')
              } else {
                temObj.timeList = [...this.timeForm.timeList]
              }
            }
            // 调接口
            await startSaveAPI(temObj)
            this.isSave = true
            this.$message.success('开始存储成功！')
          } catch (error) {
            console.log(error)
            this.$message.error('操作失败！')
          }
        } else {
          return false
        }
      })
    },
    // 停止存储
    async stopSaving () {
      try {
        await stopSaveAPI()
        this.isSave = false
        // 清空时间列表 => 停止存储后，让用户重新配置
        /* this.timeForm.timeList = [
          {
            startTime: null,
            endTime: null,
            id: Date.now()
          }
        ] */
        this.$message.success('已停止存储！')
      } catch (error) {
        console.log(error)
        this.$message.error('操作失败！')
      }
    },
    handleRadioClick () {
      if (this.settingForm.keyboardControlMode == 0) {
        this.settingForm.keyboardControlMode = 1
      } else {
        this.settingForm.keyboardControlMode = 0
      }
    },
    validateChooseTime (rule, value, callback) {
      const { hour, min, second, keyboardControlMode } = this.settingForm
      const currentTime = new Date()
      const userTime = new Date()

      // 设置用户输入的时间
      userTime.setHours(hour, min, second, 0)

      // 比较用户输入的时间是否小于当前系统时间
      if (
        keyboardControlMode == 0 &&
        this.chooseTime &&
        userTime < currentTime
      ) {
        callback(new Error('输入的时间不能小于当前系统时间'))
      } else {
        callback()
      }
    },
    // 导出历史文件
    async exportFile () {
      if (!this.$refs.historyList.selection.length) {
        return this.$message.warning('请选择要导出的文件！')
      }

      try {
        this.loading = true
        const ids = this.$refs.historyList.selection.map((item) => item.id)

        const data = await exportFileAPI({ ids })
        // res就是接口返回的文件流了; 定义请求的接口时需标明responseType: 'blob',//将文件流转成blob对象
        const objectUrl = window.URL.createObjectURL(new Blob([data]))
        const elink = document.createElement('a')
        elink.download = '导出文件.zip' // 下载文件名称,
        elink.style.display = 'none'
        elink.href = objectUrl
        document.body.appendChild(elink)
        elink.click()
        document.body.removeChild(elink)
        window.URL.revokeObjectURL(elink.href) // 释放URL 对象
        this.$message.success('导出成功！')
        this.loading = false
      } catch (error) {
        console.log(error)
        this.$message.error('导出失败！')
        this.loading = false
      }
    },
    // 配置存储阈值
    async setThresholdValue (isStart) {
      try {
        const temObj = { ...this.thresholdForm }
        temObj.isStart = isStart
        await setThresholdValueAPI(temObj)
        this.thresholdForm.isStart = isStart
      } catch (error) {
        console.log(error)
        this.$message.error('配置失败！')
      }
    },
    initWebSocket () {
      // const wsuri = process.env.VUE_APP_WS_API + 'toec/yk/ws/123456'
      const wsuri = window.webConfig.webBaseWSUrl + 'toec/yk/ws/123456'
      this.webSocket = new WebSocket(wsuri)
      this.webSocket.onmessage = this.webSocketOnMessage
      this.webSocket.onopen = this.webSocketOnOpen
      this.webSocket.onerror = this.webSocketOnError
      this.webSocket.onclose = this.webSocketClose
    },
    webSocketOnOpen () {
      console.log('websocket已打开')
    },
    webSocketOnError () {
      console.log('websocket发生了错误')
    },
    webSocketClose (e) {
      console.log('断开连接', e)
    },
    webSocketOnMessage (e) {
      if (!e.data) return
      const data = JSON.parse(e.data)
      // console.log('ws推送数据', data)
      if (data.collectStop != undefined && data.collectStop == true) {
        this.stopCollect()
      }

      if (data.isSave != undefined && data.isSave == false) {
        this.stopSaving()
      }

      if (data.isSaving != undefined) {
        this.isSaving = data.isSaving
      }

      if (data.stateDisplay != undefined) {
        this.deviceInfo = data.stateDisplay
      }

      if (
        this.chartType == 0 &&
        data.fftData != undefined &&
        data.iqData != undefined &&
        this.collectSwitch
      ) {
        // if (this.currentChannel == data.channelId) {
        this.$refs[`webGLChartDetial${data.channelId}`].drawChart(
          {
            fFTRealtime: data.iqData,
            fFTAvg: data.iqData,
            pubuData: data.fftData,
            mode: 'shiyu'
          },
          data.startFre * 1000,
          data.endFre * 1000,
          data.startFre * 1000,
          data.endFre * 1000
          // (this.settingForm[`frequency${this.currentChannel}`] - 350) * 1000,
          // (this.settingForm[`frequency${this.currentChannel}`] + 350) * 1000,
          // (this.settingForm[`frequency${this.currentChannel}`] - 350) * 1000,
          // (this.settingForm[`frequency${this.currentChannel}`] + 350) * 1000
        )
        // }
      }

      if (
        this.chartType == 1 &&
        data.fftData != undefined &&
        data.iqData != undefined &&
        this.collectSwitch
      ) {
        // if (this.currentChannel == data.channelId) {
        this.$refs[`webGLChartDetial${data.channelId}`].drawChart(
          {
            fFTRealtime: data.fftData,
            fFTAvg: data.fftData,
            pubuData: data.fftData,
            mode: 'pinyu'
          },
          data.startFre * 1000,
          data.endFre * 1000,
          data.startFre * 1000,
          data.endFre * 1000
          // (this.settingForm[`frequency${this.currentChannel}`] - 350) * 1000,
          // (this.settingForm[`frequency${this.currentChannel}`] + 350) * 1000,
          // (this.settingForm[`frequency${this.currentChannel}`] - 350) * 1000,
          // (this.settingForm[`frequency${this.currentChannel}`] + 350) * 1000
        )
        // }
      }
    },
    changePubuYInterval () {
      /* if (this.currentChannel == 1) {
        this.$refs.webGLChartDetial.changeYRange(
          this.pubuMap[1][1],
          this.pubuMap[1][0]
        )
      } else {
        this.$refs.webGLChartDetial.changeYRange(
          this.pubuMap[2][1],
          this.pubuMap[2][0]
        )
      } */

      this.$refs.webGLChartDetial1.changeYRange(
        this.pubuMap[1][1],
        this.pubuMap[1][0]
      )

      this.$refs.webGLChartDetial2.changeYRange(
        this.pubuMap[2][1],
        this.pubuMap[2][0]
      )
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  padding: 10px 15px;
  height: calc(100vh - 50px);
  // background-color: pink;
  // display: flex;
  // position: relative;

  .topContainer {
    height: calc(100vh - 130px);
    display: flex;
    .setting {
      width: 300px;
      height: 100%;
      // background-color: #0d0d0d;
      margin-right: 15px;
      // padding: 5px 10px;

      /deep/ .el-form-item--mini.el-form-item {
        margin-bottom: 8px;

        &.mg14 {
          margin-bottom: 14px;
        }
      }

      /deep/ .el-tabs__item {
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        // color: #0d0d0d;

        &.is-active {
          color: #409eff;
        }
      }

      /deep/ .el-form-item__label,
      /deep/ .el-form-item__content {
        // color: #0d0d0d;
      }

      /deep/ .el-card {
        margin-bottom: 8px;
      }

      /deep/ .el-card__body {
        // background-color: #0d0d0d;
        border: 1px solid #797979;
      }

      /deep/ .textarea .el-card__body {
        height: calc(100vh - 608px);
      }

      /deep/ .el-input__inner {
        background-color: transparent;
        // color: #0d0d0d;
        padding-left: 5px;
        padding-right: 30px;
      }

      /deep/ .num .el-input__inner {
        padding-right: 5px;
      }

      /deep/ .el-textarea__inner {
        background-color: transparent;
        // color: #0d0d0d;
      }

      /deep/ .el-input-number__decrease,
      /deep/ .el-input-number__increase {
        background: transparent;
        // color: #0d0d0d;
      }

      /deep/ .el-tag.el-tag--info {
        background: transparent;
        // color: #0d0d0d;
      }

      /deep/ .el-tag__close.el-icon-close::before {
        // color: #000;
      }
    }

    .rightContainer {
      flex: 1;
      background-color: #fff;
      border: 1px solid #797979;
      padding: 0 5px;

      .btns {
        height: 40px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        position: relative;
        padding-left: 20px;

        .label {
          margin-right: 5px;
        }

        .channel {
          width: 80px;
          height: 30px;
          line-height: 30px;
          margin-right: 20px;
          border-radius: 5px;
          background-color: #fff;
          color: #282c34;
          cursor: pointer;

          &.active {
            background-color: #ffa500;
            color: #fff;
          }
        }

        /deep/ .el-radio {
          // color: #0d0d0d;
          line-height: 40px;
        }
      }

      .charts {
        height: calc(100vh - 208px);
        width: 100%;
        display: flex;

        /deep/ .detialCharts {
          flex: 1;
          margin-left: 5px;
          height: calc(100vh - 208px);
          // background-color: #fff;

          &:first-child {
            margin-left: 0;
          }
        }
      }
    }
  }

  /deep/ .el-dialog__header {
    text-align: left;
    font-weight: 700;
    font-family: "楷体";
    // background: #000;
    // color: #f0f0f0;
    padding: 10px 20px;
    // border: 2px solid #ebf2f3;
    // border-bottom: none;

    .dialogTitle {
      font-size: 20px;
    }

    .el-dialog__headerbtn {
      top: 8px;
      right: 15px;

      .el-dialog__close {
        // color: #ebf2f3;
        font-size: 30px;
        font-weight: 700;
      }
    }
  }

  /deep/ .el-dialog__body {
    padding: 0 0 20px;
    // background-color: #000;
    // border: 1px solid #ebf2f3;
  }

  /deep/ .timeList .el-dialog__body {
    height: 500px;
    padding: 10px;
    overflow: auto;

    .el-form-item__label {
      // color: #0d0d0d;
    }
  }

  /deep/ .timeList .el-dialog {
    margin-left: 17.5%;
  }

  /deep/ .el-dialog__footer {
    // background-color: #000;
    padding: 5px 20px;
    // border: 1px solid #ebf2f3;
    border-top: 0;
  }

  /deep/ .el-table {
    // background-color: #000;
  }

  /deep/ .el-table th {
    // background-color: #313131 !important;
    // color: #ebf2f3 !important;
  }

  /deep/ .el-table td {
    cursor: pointer;
    height: 20px;
    // background-color: #000;
    // color: #ebf2f3;
  }

  /deep/ .el-table tr {
    // background-color: #000 !important;
    // color: #ebf2f3 !important;

    &:hover {
      td {
        // background-color: #4d6081 !important;
        // color: #fff !important;
      }
    }
  }

  /deep/ .el-table__body-wrapper {
    height: 29vh;
    overflow-y: auto;
  }

  /deep/ .el-pagination {
    // text-align: center;
    padding-right: 10px;

    .el-pagination__total {
      // color: #fff !important;
    }
  }

  /deep/ .el-pagination.is-background .el-pager li {
    // background-color: transparent !important;
    // color: #fff !important;

    &.active {
      color: #409eff !important;
    }
  }

  /deep/ .selected-row td {
    // background-color: #4d6081;
    // color: #fff;
  }

  .searchContainer {
    height: 50px;
    // color: #ebf2f3;
    display: flex;
    align-items: center;
    padding-left: 20px;
    .label {
      width: 60px;
      text-align: right;
      margin-right: 10px;
    }
  }

  .info {
    // position: absolute;
    height: 80px;
    width: 100%;
    text-align: left;
    font-size: 16px;
    line-height: 40px;
    // color: #fff;

    /deep/ .el-col {
      display: flex;
      align-items: center;
    }

    .circle {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #f56c6c;

      &.normal {
        background-color: #67c23a;
      }
    }
  }
}
</style>
